<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <title>场馆论坛</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--顶栏-->
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1"><a href="coachHome.html">个人中心</a></el-menu-item>
                <el-menu-item index="2"><a href="venueSearch.html">所有场馆</a></el-menu-item>
                <el-menu-item index="3"><a href="allCoach.html">所有教练</a></el-menu-item>
                <el-menu-item index="4"><a href="article.html">论坛</a></el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <!--条件查询-->
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="查询">
                    <el-input v-model="condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
            <!--展示我的文章-->
            <el-table :data="article" border>
                <el-table-column prop="poster" label="发帖人">
                </el-table-column>
                <el-table-column prop="title" label="文章标题">
                </el-table-column>
                <el-table-column prop="content" label="文章内容">
                </el-table-column>
                <el-table-column prop="publishTime" label="发布时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showCheck(scope.row)" type="text" size="small">查看评论</el-button>
<!--                        <el-button type="danger" @click="del(scope.row)" type="text" size="small">删除文章</el-button>-->
                    </template>
                </el-table-column>
            </el-table>


            <!--            <el-dialog title="回复"-->
            <!--                       :visible.sync="replayWin"-->
            <!--                       width="50%">-->

            <!--                <el-input-->
            <!--                        type="textarea"-->
            <!--                        :rows="2"-->
            <!--                        placeholder="请输入内容"-->
            <!--                        v-model="repComment">-->
            <!--                </el-input>-->
            <!--                <el-button @click="replaySubmit">确认回复</el-button>-->
            <!--            </el-dialog>-->


            <el-dialog
                    title="回复"
                    :visible.sync="replayWin"
                    width="50%"
                    :before-close="handleClose">
                <el-form ref="form" :model="newComment" label-width="80px">
                    <el-form-item label="内容">
                        <el-input v-model="newComment.content"></el-input>
                    </el-form-item>
                    <el-form-item v-if="false" label="ID">
                        <el-input v-model="articleId"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addComment">发布</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <el-dialog title="评论"
                       :visible.sync="dialogVisible"
                       width="100%">
                <!--                <span>文章标题：{{title}}</span><br>-->
                <!--                <div>文章内容：{{content}}</div>-->
                <el-table :data="comment" border>
                    <el-table-column prop="content" label="评论">
                    </el-table-column>
                    <el-table-column prop="replyer" label="评论人">
                    </el-table-column>
                    <el-table-column prop="time" label="评论时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!--                            @click="replyComment(scope.row)"   -->
<!--                            <el-button type="text" size="small">回复评论</el-button>-->
                        </template>
                    </el-table-column>


                </el-table>
                <br>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="openReplayWIn">点击评论</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
            </el-dialog>
            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.currentPage"
                        :page-sizes="[3, 4]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                add: false,
                dialogVisible: false,
                article: [],
                pageInfo: {
                    currentPage: 1,// 当前页
                    size: 3,// 每页多少条
                    total: 1// 总条目数
                },
                condition: "",
                content: "",
                title: "",
                comment: [],
                replayWin: false,
                newComment: {
                    articleId:"",
                    content:""
                },
                replayParms: {
                    repComment: "",
                    articleId: ""
                },
                articleId:""
            }
        },
        methods: {
            //添加评论
            addComment() {
                this.$message.success({showClose: true, message: '点击了添加评论成功'});
                this.comment.articleId=this.articleId;
                axios.post("/comment/addComment", this.newComment).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.$message.success({showClose: true, message: '添加成功'});
                        this.query();
                        this.replayWin = false;
                    } else {
                        this.$message.error({showClose: true, message: resp.data.message});
                    }
                })
            },

            //点击添加按钮打开添加评论窗口
            add() {

            },

            //关闭对话框提示
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //回复提交事件
            replaySubmit() {

                this.$message.success({showClose: true, message: '点击了确认回复'});
                let param = this.replayParms;
                console.log('回复内容', param)
                axios.put('/comment/reply', param).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.$message.success({showClose: true, message: '回复成功'});
                        this.queryComment();
                        this.replayWin = false;
                    } else {
                        this.$message.error({showClose: true, message: resp.data.message});
                    }

                })


            },
            //点击回复按钮打开回复窗口
            openReplayWIn() {
                this.newComment.articleId = this.articleId
                this.replayWin = true;

            },

            // 分页 - 更改每页条数
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.query();
            },
            // 分页 - 更改当前页
            handleCurrentChange(val) {
                this.pageInfo.currentPage = val
                this.query();
            },
            // del(row) {
            //     axios.delete("/article/del?id=" + row.articleId).then(resp => {
            //         if (resp.data.code == 200 && resp.status == 200) {
            //             alert("删除成功");
            //             this.query();
            //         }
            //     })
            // },
            showCheck(row) {
                this.articleId=row.articleId;
                this.dialogVisible = true;
                this.title = row.title;
                this.content = row.content;
                this.queryComment(row.articleId);
            },
            queryComment(articleId) {
                axios.get("/comment/query?articleId=" + articleId).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.comment = resp.data.data;
                    }
                })
            },
            query() {
                axios.get("/article/query?condition=" + this.condition + "&page=" + this.pageInfo.currentPage + "&size=" + this.pageInfo.size).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.article = resp.data.data.records;
                        this.pageInfo.total = resp.data.data.total
                    }
                })
            }
        },
        created() {
            this.query()
        }
    })
</script>
</body>
</html>